<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <div v-if="meta.indexOf('OnlineCoursesAdd') > -1" class="doumee_table_header">
      <el-button
        v-preventReClick
        type="primary"
        @click="handleEdit()"
      >{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column
        align="center"
        :label="$t('message.kcmc')"
        min-width="140"
        prop="courseName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.kctp')"
        min-width="90"
        prop="courseImage"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 30px;"
            fit="contain"
            :src="scope.row.courseImage"
            :preview-src-list="[scope.row.courseImage]"
          />
        </template>
        <!-- <template slot-scope="scope">
          <el-image
            fit="contain"
            :src="scope.row.courseImage"
            :preview-src-list="[scope.row.courseImage]"
          />
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.kcjj')"
        prop="introduction"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.kcjgy')"
        prop="price"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="$t('message.bmrs')"
        min-width="80"
        prop="joinNum"
      />
      <el-table-column align="center" :label="$t('message.status')" fixed="right" prop="status" width="120">
        <template slot-scope="scope">
          {{ scope.row.status == "1" ? $t('message.dfbxj') : $t('message.shanjia') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" :width="$i18n.locale === 'ZH'? 240 : 320" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button v-if="meta.indexOf('OnlineCoursesVideoOrder') > -1" type="text" @click="videoBtn(scope.row)">{{ $t('message.videogl') }}</el-button>
            <!-- <el-button type="text" @click="$router.push({ name: 'OnlineCoursesAdd', query: {courseId: scope.row.courseId, isUpload: scope.row.isUpload, status: scope.row.status} })">{{ $t('message.edit') }}</el-button> -->
            <el-button type="text" @click="handleEdit(scope.row)">{{ $t('message.edit') }}</el-button>
            <el-button
              v-if="scope.row.isUpload == '1' && scope.row.status == 1 && meta.indexOf('OfflinecoursesStatus') > -1"
              type="text"
              @click="updateStatus(scope.row, 1)"
            >{{ $t('message.shanjia') }}</el-button>
            <el-button
              v-if="scope.row.status == 2 && meta.indexOf('OfflinecoursesStatus') > -1"
              type="text"
              class="secondColor"
              @click="updateStatus(scope.row, 5)"
            >{{ $t('message.xiajia') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <Edit
      v-if="isShowEdit"
      ref="editRef"
      @success="getList"
      @close="isShowEdit = false"
    />
    <VideoAdmin
      v-if="isShowVideo"
      ref="videoRef"
      @close="isShowVideo = false"
      @success="getList"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { listCourse, updateStatusCourse, closeCourse } from '@/api'
import { queryFormConfig } from './config'
import QueryForm from '@/components/QueryForm'
import Edit from '../onlineCoursesAdd'
import VideoAdmin from '../onlineCoursesVideoOrder'
export default {
  name: 'OnlineCoursesList',
  components: {
    QueryForm,
    Edit,
    VideoAdmin
  },
  data() {
    return {
      isShowEdit: false,
      isShowVideo: false,
      queryFormConfig,
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      meta: [],
      filters: {},
      listLoading: false
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {
    this.getList()
    this.$refs.table.doLayout()
  },
  methods: {
    handleEdit(item) {
      this.isShowEdit = true
      this.$nextTick(() => {
        this.$refs.editRef.init(item)
      })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    videoBtn(e) {
      this.isShowVideo = true
      this.$nextTick(() => {
        this.$refs.videoRef.courseId = e.courseId
        this.$refs.videoRef.isShowModal = true
        this.$refs.videoRef.toGetAreaList()
      })
      // this.$router.push({
      //   name: 'OnlineCoursesVideoOrder',
      //   query: {
      //     courseId: e.courseId
      //   }
      // })
    },
    updateStatus(e, index) {
      let str = ''
      const that = this
      if (index === 1) {
        str = this.$t('message.sjtc')
      } else {
        str = this.$t('message.xjtc')
      }
      that.$confirm(str, this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          updateStatusCourse({ param: { courseId: e.courseId, operation: index }})
            .then(res => {
              if (res.errorCode === '000000') {
                if (index === 1) {
                  that.$message.success(this.$t('message.sjcg'))
                } else {
                  that.$message.success(this.$t('message.xjcg'))
                }
                that.getList(1)
              }
            })
        })
    },
    closeCourse(courseId) {
      this.$confirm(this.$t('message.sckctc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          closeCourse({ param: { courseId }}).then(res => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.$t('message.delcg'))
            this.getList(1)
          })
        })
        .catch(() => {
          // console.log('已取消删除')
        })
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      if (filters.time && filters.time.length > 0) {
        filters.startDate = filters.time[0] + ' 00:00:00'
        filters.endDate = filters.time[1] + ' 23:59:59'
      } else {
        filters.startDate = parseTime(new Date()).slice(0, 10) + ' 00:00:00'
        filters.endDate = parseTime(new Date()).slice(0, 10) + ' 23:59:59'
      }
      filters.flag = '1'
      this.listLoading = true
      listCourse({ pagination, param: { venueId, ...filters }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

